<template>
  <el-row type="flex" justify="center">
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="真实姓名" prop="stu_name">
      <el-input v-model="ruleForm.stu_name"></el-input>
    </el-form-item>
    <el-form-item label="性别">
    <el-radio-group v-model="ruleForm.gender">
      <el-radio :label="0" >男</el-radio>
      <el-radio :label="1" >女</el-radio>
    </el-radio-group>
    </el-form-item>

    <el-form-item label="年龄">
    <el-input-number v-model="ruleForm.age" controls-position="right" @change="handleChange" :min="1" :max="100"></el-input-number>
    </el-form-item>
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">

        <el-input type="tel" v-model="ruleForm.phone" maxlength="11"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="passwordConfirm">
      <el-input type="password" v-model="ruleForm.passwordConfirm" autocomplete="off"></el-input>
    </el-form-item>

    <el-button class="el-button" type="primary" @click="register(ruleForm)">注册</el-button>

  </el-form>
  </el-row>
</template>
<script>
import axios from "axios";
export default {
  name:"Register",
  data() {
    return {
      user:{
        gender:'',
        age:'',
        phone:'',
        stu_name:'',
        stuUsername:'',
        stuPassword:''
      },
      ruleForm: {
        gender:0,
        age:'',
        phone:'',
        stu_name: '',
        username: '',
        password: '',
        passwordConfirm: '',
      },
      loading: false,
      rules: {
        phone:[{required: true, message: '电话号码不能为空', trigger: 'blur'}],
        stu_name: [{required: true, message: '真实姓名不能为空', trigger: 'blur'}],
        username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
        password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
        passwordConfirm: [{required: true, message: '密码不能为空', trigger: 'blur'}]
      },
      checked: true,
    };
  },
  methods:{
    register(){
      console.log(this.ruleForm.gender)
      var that =this
      this.user.sex = this.ruleForm.gender,
      this.user.phone = this.ruleForm.phone,
      this.user.age = this.ruleForm.age,
      this.user.stuName =this.ruleForm.stu_name,
      this.user.stuUsername = this.ruleForm.username,
          this.user.stuPassword=this.ruleForm.password

      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

      if(this.ruleForm.phone.length<=10 || !reg.test(this.ruleForm.phone)){
        that.$message({
          message:'请输入正确的手机号码！',
          type: 'error'
        })
      }else {
        if (this.ruleForm.passwordConfirm != this.ruleForm.password) {
          that.$message({
                message: '请确认两次密码是否相同',
                type: 'error'
              }
          )
        } else {
          axios.post("http://localhost:8888/api/addUser", this.user).then(res => {
            console.log(res.data)
            if (res.data.code === 1 || res.data.code === '1') {

              that.$router.push('/login')
              that.$message({
                    message: '注册成功',
                    type: 'success'
                  }
              )
            } else {
              // console.log(res.data.code === 0)
              that.$message({
                message: '该用户名已存在，请更换一个',
                type: 'error'
              })
            }
          })
        }
      }
    }
  }
}
</script>

<style>
.el-button{
  width: 380px;
  padding: 10px;
  margin-left: 99px;
}
.demo-ruleForm{
  margin-top: 250px;
}

/*input::-webkit-outer-spin-button,*/
/*input::-webkit-inner-spin-button {*/
/*  -webkit-appearance: none;*/
/*}*/
/*input[type="number"]{*/
/*  -moz-appearance: textfield;*/
/*}*/
</style>
